<template>
  <!-- 登录头部 -->
  <div class="ih-sticky">
    <div class="ih-container" style="position:relative">
      <!-- 顶部黑色导航 -->
      <div class="ih-black-bg">
        <div class="ih-info">
          <div @click="changeTab(5)" class="navr" :class="number === 5 ? 'info-active' : ''">我的钱包</div>
          <div @click="changeTab(6)" class="navr" :class="number ===6 ? 'info-active' : ''">帮助中心</div>
          <div class="navr ih-is-login fans6"  @mouseover="listShow=true" @mouseout="listShow=false">
            <!-- 登录前 -->
            <div 
              @click="jumpLogReg(8)" 
              v-if="!token" 
              :class="number === 8 ? 'info-active' : ''"
            >
              登录/注册
            </div>
            <!-- 登录后 -->
            <div 
              @click="goUserItem('/user', 0);changeTab(7)" 
              :class="number === 7 ? 'info-active' : ''"
            >账户管理
            </div>
            <!-- 蒙层 -->
            <div class="ih-xl-list" v-show="listShow && token">
              <div class="ih-xl-item">ID: {{userid}}</div>
              <div class="ih-xl-item" @click="goUserItem('/user', 0)" :class="number === 7 && userIndex === 0 ? 'ih-nav-line-active' : ''">基本信息</div>
              <div class="ih-xl-item" @click="goUserItem('/user/setting', 1)" :class="number === 7 && userIndex === 1 ? 'ih-nav-line-active' : ''">偏好设置</div>
              <div class="ih-xl-item" @click="logout">退出</div>  
            </div>
          </div>
        </div>
      </div>
      <!-- 导航 -->
      <div class="ih-content">
        <!-- 左边logo -->
        <div class="ih-logo fans1-logo" @click="loginJump">
          <!-- <img src="../assets/images/haoda-logo.png" /> -->
          <img src="../assets/images/haoda-logo.png" />
        </div>
        <!-- 右边导航 -->
        <div class="ih-nav">
          <div class="ih-nav-list">
            <div @click="changeTab(1)" class="list-item fans1" :class="number === 1 ? 'active' : ''">我要涨粉</div>
            <div @click.stop="changeTab(2)" class="list-item fans2" :class="number === 2 ? 'active' : ''">多帐号管理</div>
            <div @click="changeTab(3)" class="list-item fans3" :class="number === 3 ? 'active' : ''">我要卖货</div>
            <div @click="changeTab(4)" class="list-item fans4" :class="number === 4 ? 'active' : ''">我要供货</div>
            <div @click="changeTab(10)" class="list-item" :class="number === 10 ? 'active' : ''">爆品情报</div>
            <div @click="changeTab(9)" class="list-item" :class="number === 9 ? 'active' : ''">更多工具</div>
          </div>  
        </div>
      </div>
      <!-- 我要涨粉 -->
      <v-mask  v-show="flag && number===1">
        <v-tooltip-box class="add-fans">
          <v-circle></v-circle>
          <v-line></v-line>
          <v-tooltip>
            <v-star></v-star>
            <v-triangle></v-triangle>
            <div class="control-tooltip jus-layout">
              <div class="next" @click="next(-1)">下一步</div>
            </div>
          </v-tooltip>
        </v-tooltip-box>
      </v-mask>
      <!-- 我要涨粉-任务管理 -->
      <v-mask  v-show="flag && number===-1">
        <v-tooltip-box class="task-manage"  :title="navTitle8">
          <v-circle></v-circle>
          <v-line class="task-line"></v-line>
          <v-tooltip class="task-tooltip" :title="title8">
            <v-star></v-star>
            <v-triangle class="task-triangle"></v-triangle>
            <div class="control-tooltip jus-layout">
              <div class="stop" @click="stop(1)">知道了</div>
            </div>
          </v-tooltip>
        </v-tooltip-box>
      </v-mask>
      <!-- 多账号管理 -->
      <v-mask  v-show="flag && number===2">
        <v-tooltip-box class="multi-account-manage"  :title="navTitle2">
          <v-circle></v-circle>
          <v-line></v-line>
          <v-tooltip :title="title2">
            <v-star></v-star>
            <v-triangle></v-triangle>
            <div class="control-tooltip jus-layout">
              <div class="next" @click="next(2)">下一步</div>
              <div class="stop margin-end" @click="stop(2)">知道了</div>
            </div>
          </v-tooltip>
        </v-tooltip-box>
      </v-mask>
      <!-- 我要卖货 -->
      <v-mask  v-show="flag && number===3">
        <v-tooltip-box class="sell-goods"  :title="navTitle3">
          <v-circle></v-circle>
          <v-line></v-line>
          <v-tooltip :title="title3">
            <v-star></v-star>
            <v-triangle></v-triangle>
            <div class="control-tooltip jus-layout">
              <div class="next" @click="next(-2)">下一步</div>
            </div>
          </v-tooltip>
        </v-tooltip-box>
      </v-mask>
      <!-- 我要卖货-我的选品 -->
      <v-mask  v-show="flag && number===-2">
        <v-tooltip-box class="selected-goods"  :title="navTitle9">
          <v-circle></v-circle>
          <v-line></v-line>
          <v-tooltip :title="title9">
            <v-star></v-star>
            <v-triangle></v-triangle>
            <div class="control-tooltip jus-layout">
              <div class="stop margin-end" @click="stop(3)">知道了</div>
            </div>
          </v-tooltip>
        </v-tooltip-box>
      </v-mask>
      <!-- 我要供货 -->
      <v-mask  v-show="flag && number===4">
        <v-tooltip-box class="provide-goods" :title="navTitle4">
          <v-circle></v-circle>
          <v-line></v-line>
          <v-tooltip :title="title4">
            <v-star></v-star>
            <v-triangle></v-triangle>
            <div class="control-tooltip jus-layout">
              <div class="stop margin-end" @click="stop(4)">知道了</div>
            </div>
          </v-tooltip>
        </v-tooltip-box>
      </v-mask>
      <!-- 我的钱包-效果报表-销售效果-->
      <v-mask  v-show="flag && number===5">
        <v-tooltip-box class="my-wallet" :title="navTitle5">
          <v-circle></v-circle>
          <v-line></v-line>
          <v-tooltip :title="title5">
            <v-star></v-star>
            <v-triangle></v-triangle>
            <div class="control-tooltip jus-layout">
              <div class="next" @click="next(-3)">下一步</div>
            </div>
          </v-tooltip>
        </v-tooltip-box>
      </v-mask>
      <!-- 我的钱包-效果报表-订单明细/商品销量-->
      <v-mask  v-show="flag && number===-3">
        <v-tooltip-box class="order-detail" :title="navTitle10">
          <div class="goods-sale">商品销量</div>
          <v-circle class="order-circle"></v-circle>
          <v-line class="order-line"></v-line>
          <v-line class="order-line1"></v-line>
          <v-tooltip :title="title10" class="order-tooltip">
            <v-star></v-star>
            <v-triangle></v-triangle>
            <div class="control-tooltip jus-layout">
              <div class="stop margin-end" @click="stop(5)">知道了</div>
            </div>
          </v-tooltip>
        </v-tooltip-box>
      </v-mask>
      <!-- 账户管理 -->
      <v-mask  v-show="flag && number===7">
        <v-tooltip-box class="account-manage"  :title="navTitle7">
          <v-circle></v-circle>
          <v-line class="account-line-manage"></v-line>
          <v-tooltip :title="title7" class="account-tooltip-manage">
            <v-star class="account-star-manage"></v-star>
            <v-triangle class="account-triangle-manage"></v-triangle>
            <div class="control-tooltip account-control">
              <div class="stop margin-end account-margin-top" @click="stop(7)">知道了</div>
            </div>
          </v-tooltip>
        </v-tooltip-box>
      </v-mask>
    </div>
    <!--权限弹框  -->
    <!-- <AuthModal :isShow = "true"></AuthModal> -->
  </div>
</template>

<script>
import Mask from './Mask'
import TooltipBox from './TooltipBox'
import Circle from './Circle'
import Line from './Line'
import Tooltip from './Tooltip'
import ImgStar from './ImgStar'
import Triangle from './Triangle'
// import AuthModal from './AuthModal'
// 连麦
export default {
  components: {
    'v-mask':Mask,
    'v-tooltip-box':TooltipBox,
    'v-circle':Circle,
    'v-line':Line,
    'v-tooltip':Tooltip,
    'v-star':ImgStar,
    'v-triangle':Triangle,
    // AuthModal
  },
  data() {
    return {
      listShow: false,
      token:"",
      name:"",
      userid:"",
      flag:false,
      screenWidth: '',
      // n:-10, //控制显示tooltip的
      navTitle2:'多账号管理',
      navTitle3:'我要选货',
      navTitle4:'我要供货',
      navTitle5:'销售效果',
      // navTitle6:'帮助中心',
      navTitle7:'账户管理',
      navTitle8:'任务管理',
      navTitle9:'我的选品',
      navTitle10:'订单明细',
      title2:'这里可以添加多个快手小店的帐号哦~', //多账号管理
      title3:'在这里可以选择心仪的商品哦~', //我要供货
      title4:'这里可上传我想供应的商品哦~', //我要供货
      title5:'打开效果报表-销售效果里可查询具体订单信息哦~', //我的钱包
      // title6:'这里是帮助中心哦~',
      title7:'打开账户管理可填写联系人信息及收款信息的哦~', //账户管理
      title8:'点击这里可通过下面的操作增加粉丝数量哦~', //我要涨粉-任务管理
      title9:'点开已选商品-我的选品，可以查看您已经选好的商品哦~', //我要卖货-我的选品
      title10:'打开效果报表-订单明细和商品销量可单独点击查询呢~', //我的钱包-订单明细和商品销量
    }
  },
  mounted(){
    this.token = localStorage.getItem('token');
    this.name = localStorage.getItem('name');
    this.userid = localStorage.getItem('userid');
    this.newGuide();
    this.leadShow();
    window.addEventListener('resize',this.newGuide) 
  },
  beforeDestroy(){
    window.removeEventListener('resize',this.newGuide)
  },
  watch:{
   flag(){
     if(this.number===6 || this.number === 22){
       this.flag = false;
     }
   },
  },
  computed: { //计算属性
    number() {
      return this.$store.state.interIndex
    },
    number1() {
      return this.$store.state.loginReg
    },  
    userIndex(){
      return this.$store.state.userIndex
    },
    user(){ //获取到用户的信息
      return this.$store.state.user
      // return this.$store.state.userid
    },
  },
  created(){
  },
  methods: {
    //跳过 也调用一个接口，传递一个type即可 (type=1,type=2,type=3,type=4;type=5,type=6,type=7,分别对应导航的标题)
    next (index) {
    this.$store.commit('setInterIndex',index)
     if (index === 0){
        this.flag = true;
     } else if(index===-1){ //点击下一步的时候，还需要把flag 变为true
        this.flag = true;
     } else if(index === -2){
        this.flag = true;
     } else if(index === -3){
        this.flag = true;
     }
    },
    //知道了 也调用一个接口，传递一个type即可 (type=1,type=2,type=3,type=4;type=5,type=6,type=7,分别对应导航的标题)
    stop (index) { 
      this.$store.commit('setInterIndex',index);
      this.finishLead();
    },
    //新手指引
    async leadShow(){
      let params =({
        type:this.number
      })
     await this.$axios.$post('leadShow',params).then(res => {
        if(res.status === 200 ){
          this.flag = res.obj.isShow;
          // this.flag = true; //暂时打开
        }else{
          this.$message.warning(res.msg)
        }
      })
    },
    //完成引导
    finishLead(){
      let params =({
        type:this.number
      })
      this.$axios.$post('finishLead',params).then(res => {
        this.flag = false; 
        if(res.status === 200 ){
          this.flag = false; //指导完变为false,隐藏掉
        }else{
          this.$message.warning(res.msg)
         }
      })
    },
    //新手指引
     newGuide () {
      //我要涨粉
       this.$nextTick(() => {
        var box1 = document.getElementsByClassName('fans1')[0];
        var box2 = document.getElementsByClassName('fans2')[0];
        // var box3 = document.getElementsByClassName('fans3')[0];
        var box4 = document.getElementsByClassName('fans4')[0];
        // var box5 = document.getElementsByClassName('fans5')[0];
        var box6 = document.getElementsByClassName('fans6')[0];
        var box7 = document.getElementsByClassName('fans1-logo')[0];
        //导航的相对定位点
        var outer = document.getElementsByClassName('ih-container')[0];
        outer.style.position = "relative";
        box1.offsetParent //我要涨粉以父级ih-container参照物为基础
        box2.offsetParent //多账号管理以父级ih-container参照物为基础
        // box3.offsetParent //我要卖货以父级ih-container参照物为基础
        box4.offsetParent //我要供货以父级ih-container参照物为基础
        // box5.offsetParent //我的钱包以父级ih-container参照物为基础
        box6.offsetParent //帐号管理以父级ih-container参照物为基础
        box7.offsetParent //我要涨粉-任务管理以父级ih-container参照物为基础
        var boxOffsetLeft1 = box1.offsetLeft; //我要涨粉元素的左偏移
        var boxOffsetLeft2 = box2.offsetLeft; //多账号管理元素的左偏移
        var boxOffsetLeft4 = box4.offsetLeft; //我要供货元素的左偏移
        // var boxOffsetLeft5 = box5.offsetLeft; //我的钱包元素的左偏移
        var boxOffsetLeft6 = box6.offsetLeft; //帐号管理元素的左偏移
        var boxOffsetLeft7 = box7.offsetLeft; //帐号管理元素的左偏移
        var boxOffsetTop7 = box7.offsetTop; //帐号管理元素的左偏移
        //我要涨粉
        var maskBox1 = document.querySelector('.add-fans')
        maskBox1.style.position = 'absolute';
        maskBox1.style.left= (boxOffsetLeft1-20) +'px';
        maskBox1.style.zIndex = 10000;
        //我要涨粉-连麦
        // var maskBox10 = document.querySelector('.connect-fans')
        // maskBox10.style.position = 'absolute';
        // maskBox10.style.left= (this.boxLeft-158)+'px' 
        // // maskBox10.style.left= (boxOffsetLeft7)+'px'
        // maskBox10.style.zIndex = 10000;
        //多账号管理
        var maskBox2 = document.querySelector('.multi-account-manage')
        maskBox2.style.position = 'absolute';
        maskBox2.style.left= (boxOffsetLeft2-15) +'px';
        maskBox2.style.zIndex = 10000;
        //我要卖货-我要选货
        var maskBox3 = document.querySelector('.sell-goods')
        maskBox3.style.position = 'absolute';
        maskBox3.style.left= (boxOffsetLeft7-10) +'px';
        maskBox3.style.top= (boxOffsetTop7+70) +'px';
        maskBox3.style.zIndex = 10000;
        //我要供货
        var maskBox4 = document.querySelector('.provide-goods')
        maskBox4.style.position = 'absolute';
        maskBox4.style.left= (boxOffsetLeft4-20) +'px';
        maskBox4.style.zIndex = 10000;
        //我的钱包-效果报表-销售效果
        var maskBox5 = document.querySelector('.my-wallet')
        maskBox5.style.position = 'absolute';
        maskBox5.style.left= (boxOffsetLeft7-10) +'px';
        maskBox5.style.top= (boxOffsetTop7+90) +'px';
        maskBox5.style.zIndex = 10000;
        //账户管理
        var maskBox6 = document.querySelector('.account-manage')
        maskBox6.style.position = 'absolute';
        maskBox6.style.left=(boxOffsetLeft6-20) +'px';
        var Box6 = maskBox6.style.left=boxOffsetLeft6 +'px';
        var left6 = maskBox6.style.left=(boxOffsetLeft6-20) +'px';
        var top6 = maskBox6.style.left=(boxOffsetLeft6-20) +'px';
        maskBox6.style.zIndex = 10000;
        //我要涨粉-任务管理
        var maskBox7 = document.querySelector('.task-manage')
        maskBox7.style.position = 'absolute';
        maskBox7.style.left= (boxOffsetLeft7-16) +'px';
        maskBox7.style.top= (boxOffsetTop7+141) +'px';
        maskBox7.style.zIndex = 10000;
        //我要卖货-我的选品
        var maskBox8 = document.querySelector('.selected-goods')
        maskBox8.style.position = 'absolute';
        maskBox8.style.left= (boxOffsetLeft7-10) +'px';
        maskBox8.style.top= (boxOffsetTop7+156) +'px';
        maskBox8.style.zIndex = 10000;
        //我的钱包-效果报表-订单明细/商品销量
        var maskBox9 = document.querySelector('.order-detail')
        maskBox9.style.position = 'absolute';
        maskBox9.style.left= (boxOffsetLeft7-10) +'px';
        maskBox9.style.top= (boxOffsetTop7+76) +'px';
        maskBox9.style.zIndex = 10000;
      })
    },
    changeTab(index) {
      this.$store.commit('setInterIndex',index);
      // this.n = index;
      if (index === 1) {//我要涨粉
        this.$router.push('/myAddFans');
        this.leadShow();
        this.newGuide();
      } else if (index === 2) {//多账号管理
        this.$router.push('/multiPlat/accountPreview');
        // this.leadShow();
        // this.newGuide();
      } else if (index === 3) {//我要卖货
        this.$router.push('/pickGoodsHall');
        this.leadShow();
        this.newGuide();
      } else if (index === 4) { //我要供货
        this.$router.push('/providegoods/manage');
        this.leadShow();
        this.newGuide();
      } else if (index === 5) { //我的钱包
        this.$router.push('/wallet');
        this.leadShow();
        this.newGuide();
      } else if (index === 6){ //帮助中心
        this.$router.push('/help')
      } else if(index === 7){
        this.leadShow();
        this.newGuide();
      } else if(index ===9){ //更多工具
        this.$router.push('/moreTools')
        // this.leadShow();
        // this.newGuide();
      } else if(index ===10){ //爆品情报
        this.$router.push('/hotSystem')
      }
    },
    loginJump(){
      this.$router.push({
        path:'/'
      })
    },
    jumpLogReg (index) {
      this.$store.commit('setInterIndex',index);
      if(index == 8 ) {
        this.$router.replace('/login')
      }
    },
    goUserItem(url, index) {
      this.listShow = false
      this.$store.commit('setUserIndex',index)
      this.go(url)//编程式导航
    },
    logout() { // 注销
      this.$logout() //清除token
      this.$store.commit('user/setUser', { 
        userid: '',
        token: '',   
        name: '',   
        auth: false, //区分是否登录  true登录
      })
      localStorage.removeItem('list');
      localStorage.removeItem('ksAccount');
      this.go('/');
      //清除ksAccount对象 和list数组
    },
  }
}
</script>

<style scoped>
  .io-bg{
    min-width: 1200px;
  }
  @media screen and (max-width:1200px) {
    .io-bg{
      width:1200px;
    }
  }
  .ih-sticky{
    width:100%;
    height: 120px;
    background: #fff;
    box-shadow: 1px 2px 2px #f5f5f4;
    position: sticky;
    top: 0;
    left:0;
    right:0;
    z-index: 99;
  }
  .ih-container {
    width:100%;
    height: 120px;
    background: #fff;
    box-shadow: 1px 2px 2px #f5f5f4;
    position: sticky;
    top: 0;
    left:0;
    right:0;
    z-index: 99;
  }
  /* 顶部黑色背景 */
  .ih-black-bg{
    display:flex;
    justify-content: flex-end;
    align-items:center;
    height:40px;
    line-height: 40px;
    background-color: #333333;
    color:#b8b8b8;
  }
  .ih-black-bg .ih-info{
    display:flex;
    margin-right:6%;
    cursor: pointer;
  }
  .ih-black-bg .ih-info .navr{
    margin:0 30px;
  }
  .ih-is-login{
    height:40px;
    line-height: 40px;
  }
  .ih-black-bg .ih-info .info-active{
    color:#0096e6;
  }
  .ih-content {
    width:100%;
    display: flex;
    height: 80px;
    align-items: center;
    background-color:#ffffff;
  }
  .ih-logo {
    width: 321px;
    height: 29px;
    margin-left:20px;
  }
  .ih-logo img {
    width: 321px;
    height: 29px;
  }
  .ih-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 8%;
    margin-top:35px;
    width:42%;
  }
  @media screen and (min-width: 1400px){
    .ih-nav{
      margin-left:8%;
    }
  } 
  @media screen and (max-width: 1200px){
    .ih-nav{
      margin-left:8%;
    }
  } 
  .ih-nav-list {
    display: flex;
    min-width: 397px;
    height:46px;
  }
  .ih-nav-list .list-item {
    flex:1;
    text-align: center;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
    user-select:none;
    margin-right:10%;
  }
  .ih-nav-list .active {
    color: #0096e6 !important;
    border-bottom:4px solid #0096e6 !important;
  }
  @media screen and (min-width:1400px){
    .ih-nav-list .list-item{
      margin-right:14%;
    }
  }
  @media screen and (max-width:1200px){
    .ih-nav-list .list-item {
      text-align: center;
      font-size: 16px;
      color: #333;
      cursor: pointer;
      width: 80px;
      white-space: nowrap;
      user-select:none;
      margin-right:10%;
    }
  }
  .ih-xl-list {
    background: #fff;
    position: absolute;
    width: 150px;
    right: 33px;
    top: 38px;
    z-index: 9;
    box-shadow: 1px 1px 5px #888888;
    border-radius: 5px;
  }
  .ih-xl-item {
    height: 39px;
    line-height: 39px;
    border-bottom: 1px solid #f4f4f4;
    padding-left: 27px;
    color: #333333;
    font-size: 14px;
  }
  .center {
    margin-top:-9px;
  }
  .control-tooltip {
    position:absolute;
    top: 84px;
    left:84px;  
    z-index:1000;
  }
  .jus-layout {
    display:flex;
  }
  .control-tooltip .next,
  .control-tooltip .stop{
    width:92px;
    height:34px;
    line-height:34px;
    text-align:center;
    box-sizing:border-box;
    color:#ffffff;
    border-radius:17px;
    cursor: pointer;
  }
  .control-tooltip .next {
    border:1px solid #ffffff;
  }
  .control-tooltip .next:hover {
    border:1px solid #0096e6;
    background:#0096e6;
  }
  .control-tooltip .stop {
    background:#ffffff;
    color:#0096e6;
  }
  .control-tooltip .stop:hover {
    background:#0096e6;
    color:#ffffff;
  }
  /* 连麦 */
  .vertical-btn {
    top: 220px;
    left: -44px;
  }
  .vertical-btn .stop {
    margin-top:20px;
  }
  .account-tooltip-manage {
    top:158px;
    left:-186px;
  }
  .account-line-manage {
    top:59px;
    left:50px;
  }
  .account-star-manage {
    top:-6px;
    left:20px;
  }
  .account-triangle-manage{
    top:-17px !important;
    left:227px !important;
  }
  .account-margin-top {
    margin-top:20px;
  }
  .account-control {
    top:83px !important;
    left:89px !important;
  }
  /* 我要涨粉-任务管理 */
  .task-tooltip {
    top: 160px;
    left: 19px;
  }
  .task-triangle {
    top: -17px;
    left: 22px;
  }
  .task-line {
    top: 59px;
    left: 50px;
  }
  /* 我的钱包-订单明细和商品销量 */
  .order-detail {
    width:100px;
    height:68px;
  }
  .order-line {
    top:-14px;
    left:146px;
    transform:rotate(90deg)
  }
  .order-line1 {
    top:44px;
    left:200px;
  }
  .order-circle {
    top:27px;
    left:193px;
  }
  .order-tooltip {
    top: 146px;
    left: 149px;
  }
  .goods-sale {
    position:absolute;
    top:26px;
    left:18px;
    color:#333333;
    z-index:1001;
  }
  .account-manage{
    top:-20px;
  }
</style>
